<template>
	<view>
		
		
	<view class="timeLine">
		<u-time-line>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<!-- <view class="u-order-title">提示</view> -->
							<view class="u-order-desc">普通擦亮每次加1且每天只可擦亮一次，超级擦亮每次加5，每天可擦亮多次。<text class="yixiajia" @click="navigatorToSoldOut()">查看已下架</text></view>
							<view class="outerContainer">
								<view class="container1" ref="chart">
									  <qiun-data-charts
									    type="arcbar"
									    :chartData="{series:[{data:1,color:'#18b6ff'}]}"
									    :loadingType="3"
									    background="none"
										:opts="{title:{name:' ',color:'#fd7032',fontSize:10},subtitle:{name:' ',offsetY:-8,color:'#413a3a',fontSize:5},extra:{arcbar:{type:'circle',width:6,backgroundColor:'#E9E9E9',startAngle:0.75,endAngle:0.75,radius:20,gap:10,centerX:0,centerY:0,linearType:'none',customColor:['#fd7032']}}}"/>
										<!-- customColor是往哪个颜色渐变 -->
									
								</view>
								<!-- <u-line color="#ccc" direction='col' length='38%' :hair-line='false'></u-line> -->
								<view class="line"></view>
								<view class="textt">
									当前曝光量
								</view>
								<view style="flex: 0.5;"></view>
								<view class="container1" ref="chart">
									  <qiun-data-charts
									    type="arcbar"
									    :chartData="{series:[{data:1,color:'#fd7032'}]}"
									    :loadingType="3"
									    background="none"
										:opts="{title:{name:' ',color:'#fd7032',fontSize:10},subtitle:{name:' ',color:'#413a3a',offsetY:-8,fontSize:5},extra:{arcbar:{type:'circle',width:6,backgroundColor:'#E9E9E9',startAngle:0.75,endAngle:0.75,radius:20,gap:10,centerX:0,centerY:0,linearType:'none'}}}"/>
									
								</view>
								<!-- <u-line color="#ccc" direction='col' length='38%' :hair-line='false'></u-line> -->
								<view class="line"></view>
								<view class="textt">
									超过商品比例
								</view>
							</view>
							
							
						</view>
					</template>
				</u-time-line-item>
				
				
				<u-time-line-item v-for="(item1,index1) in goodsList">
					<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
					<template v-slot:content>
						<view>
							<!-- <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>-->
							<view class="u-order-time">{{item1[0].goods.createTime.substr(0,10)}}</view> 
							<view class="first_tab">
								<view class="goodsItem" v-for="(item,index) in item1">
									<view class="goods_item">
										<!-- 左图片 -->
							                <view class="goods_img_wrap" @click="navigatorTo1([item.goods.id])">
												<view class="imgRadius">
													 <image mode="widthFix" :src="item.goods.firstPicUrl"> </image>
												</view>
							                </view>
							           <!-- 右信息 -->
							                <view class="goods_info_wrap"  >
												<view class="rightInfo" @click="navigatorTo1([item.goods.id])">
													<view class="goodsInfo1">
														<view class="goods_name"  >{{item.goods.name}}</view>
														<view class="goods_price" >￥{{item.goods.price}}</view>
													</view>
													<view class="rate">
														<view class="container1" ref="chart">
															  <qiun-data-charts
															    type="arcbar"
															    :chartData="{series:[{data:1,color:'#18b6ff'}]}"
															    :loadingType="3"
															    background="none"
																:opts="{title:{name:item.goods.exposure+'',offsetY:4,color:'#fd7032',fontSize:10},subtitle:{name:' ',color:'#413a3a',fontSize:5},extra:{arcbar:{type:'circle',width:6,backgroundColor:'#E9E9E9',startAngle:0.75,endAngle:0.75,radius:25,gap:10,centerX:0,centerY:0,linearType:'none',customColor:['#fd7032']}}}"/>
																<!-- customColor是往哪个颜色渐变 -->
															
														</view>
														<view class="container1" ref="chart">
															  <qiun-data-charts
															    type="arcbar"
															    :chartData="{series:[{data:(item.rate)/100,color:'#fd7032'}]}"
															    :loadingType="3"
															    background="none"
																:opts="{title:{name:item.rate.substr(0,5)+'%',offsetY:4,color:'#fd7032',fontSize:10},subtitle:{name:' ',color:'#413a3a',fontSize:5},extra:{arcbar:{type:'circle',width:6,backgroundColor:'#E9E9E9',startAngle:0.75,endAngle:0.75,radius:25,gap:10,centerX:0,centerY:0,linearType:['#fd7032']}}}"/>
															
														</view>
													</view>
												</view>
												
												<!-- <view class="goods_createTime">发布时间:{{item.goods.createTime}}</view> -->
												<view class="baoGuang">
													<!-- <view class="statusBut">
														<image  src="http://1.14.247.152:9797/images/16615xiajia.png" mode="widthFix"  @click="soldOutFun([item.goods.id],index,index1)"></image>
													</view> -->
													<view class="classifyBtn" >
														<view class="itemBtn">
															<button  :plain ="true" @click="clickEvent([item.goods.id])" >
															<text class="biaoti">擦亮</text>
															</button>
														</view>
													</view>
													<!-- <view class="classifyBtn">
														<view class="itemBtn">
															<button  :plain ="true" @click="" >
															<text class="biaoti">降价</text>
															</button>
														</view>
													</view> -->
													<view class="classifyBtn">
														<view class="itemBtn">
															<button  :plain ="true" @click="toEditPage([item.goods.id])" >
															<text class="biaoti">编辑</text>
															</button>
														</view>
													</view>
													<view class="statusBut" @click="soldOutFun([item.goods.id],index,index1)">
														<u-icon name="download" size="48" color="#d5c8c8" ></u-icon>
													</view>
												</view>
							                
											
											</view>
											
											
							            </view>
										
								</view>
						</view>
							
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
	</view>
	<view>
			<u-popup :closeable='true' :mask-close-able='false' v-model="show" mode="center" border-radius="34" width="70%" height="25%">
				<view class="text">
					擦亮商品可以让更多人看到你的宝贝哦！
				</view>
				<view class="buttonCaL">
					
					<view class="button1" v-if="commonPoblishBth">
						<u-button class="btnCom" type="primary" shape='circle' :ripple="true" plain   color="#fd4f02"
						@click='polished(1)'>普通擦亮</u-button>
					</view>
					<view class="button1" v-if="!commonPoblishBth">
						<u-button type="default" shape='circle'  plain   color="#fd4f02"
							@click='polished(3)'>今日已擦亮</u-button>
						
					</view>
					<view class="button2">
						<u-button type="warning" shape='circle' :ripple="true" plain  color="#fd4f02"
						@click='superPolish'>超级擦亮</u-button>
					</view>	
				</view>
				
			</u-popup>
		</view>		
	
		
	</view>
</template>

<script>
	import Parser from "../../lib/dom-parser.js"
	export default {
		name:"goodsList",
		props: {
			goodsList: {
				type: Array
			},
			hasPolishedId:{
				type: Array
			},
			
		},
		computed:{
			goodsList1:{
				get(){
					console.log('goodsList1里面的get()')
					return this.goodsList;
				},
				set(value){
					console.log('goodsList1被修改了！！！',value)
					//value是被删的数组元素
					// this.goodsList=value
					this.$forceUpdate()
				}
			}
		},
		data() {
			return {
				header:'',
				chartData:{
				  categories:[],
				  series:[{
					   name: "",
					   data: 0.63,
					   color: "#ffce44"
				  }],
				},
				show:false,
				goodId:'',
				type:'',
				commonPoblishBth:true,
				// hasPolishedId:[],
				isPoblish:false,
				openId: '',
			};
		},
		methods:{
			clickEvent(id){
				console.log('组件里的this.goodsList',this.goodsList)
				// this.hasPolishedId=[]
				// if(this.isPoblish){
				// 	this.hasPolishedId.push(this.goodId)
				// }
				console.log('this.hasPolishedId:',this.hasPolishedId)
				this.commonPoblishBth = true
				this.show = true
				this.goodId = id[0]
				this.hasPolishedId.forEach((item,index)=>{
					if(item==id){
						this.commonPoblishBth = false
					}
				})
				console.log(this.goodId)
			},
			
				async soldOutFun(id,index,index1){
					id = id[0]
					console.log('id',id,index)
					let header = new Object()
					header.Authority = getApp().globalData.header.Authority
					wx.showModal({
					  title: '提示',
					  content: '是否确认下架?',
					  success: async(res)=> {
					    if (res.confirm) {
							let data = await getApp().UniRequest(`/twohandbook/goods/authority?Authority=${header.Authority}&id=${id}`,'DELETE','',header)
							console.log('下架闲置物品res',data)
							if(data.code==20000){
								this.goodsList1= this.goodsList1[index1].splice(index,1)
								// console.log('数组长度是否等于0',this.goodsList1[index1].length==0)
								if(this.goodsList1[index1].length==0){
									this.goodsList1.splice(index1,1)
								}
								console.log('this.goodsList1',this.goodsList1)
								console.log('this.goodsList33333下架成功',this.goodsList)
								wx.showToast({
								  title: '下架成功',
								  icon: 'success',
								  duration: 800
								})
							}
					    } else if (res.cancel) {
						  console.log('点击了取消')
					    }
					  }
					})
				},
				async superPolish(){
					let header = new Object()
					header.Authority = getApp().globalData.header.Authority
						let that = this
						let outTradeNo = this.randomString(15);													
					uni.request({
						url: 'https://www.zcjn.top/zkCourse/user/authority/getOpenId', 
						header: header,
						success: (res) => {
							if (res.data.code === 20000) {
								this.openId = res.data.data.data;
								console.log(this.openId,'this.openId')
								let ip;
								wx.request({
									url: 'https://pv.sohu.com/cityjson?ie=utf-8',
									success: async function(e) {
										let index = e.data.indexOf('=')
										let temp = e.data.substring(index + 1);
										temp = temp.substring(0, temp.indexOf(';'))
										ip = JSON.parse(temp).cip;
										console.log(ip)
										uni.request({
											url: 'https://www.zcjn.top/pay/wxPay/test', //仅为示例，并非真实接口地址。
											method: 'GET',
											success: (res) => {
												console.log(res, '是否挂');
												if (res.data === '???') {
													console.log('没挂')
													let xmlData;
													let price = 99;
													let body = {
														"body": "文件",
														"outTradeNo": outTradeNo,
														"totalFee": price,
														"spbillCreateIp": ip,
														"notifyUrl": "http://www.weixin.qq.com/wxpay/pay.php",
														"tradeType": "JSAPI",
														"openid": that.openId
													}
													let body1 = {goodsId:that.goodId}
													uni.request({
														url: 'https://www.zcjn.top/pay/wxPay/createOrder', 
														data: body,
														method: 'POST',
														success: (res) => {
															uni.hideLoading()
															xmlData =res.data;
															let XMLPaser =new Parser.DOMParser();
															let doc =XMLPaser.parseFromString(res.data);
															let timeStamp =doc.getElementsByTagName('timeStamp')[0].firstChild.data;
															let nonceStr =
																doc
																.getElementsByTagName(
																	'nonceStr'
																)[
																	0]
																.firstChild
																.data;
															let packageValue =
																doc
																.getElementsByTagName(
																	'packageValue'
																)[
																	0]
																.firstChild
																.data;
															let paySign =
																doc
																.getElementsByTagName(
																	'paySign'
																)[
																	0]
																.firstChild
																.data;
															that.ispay = true
															wx.requestPayment({
																timeStamp: timeStamp,
																nonceStr: nonceStr,
																package: packageValue,
																signType: 'MD5',
																paySign: paySign,
																success: async (res) => {
																	console.log('支付成功')
																				uni.request({
																					url: 'https://www.zcjn.top/zkCourse/twohandbook/goods/authority/pay/exposure?Authority='+header.Authority,
																					data: body1,
																					header: header,
																					method: 'POST',
																					success: async (res) => {
																						console.log('超级曝光结果',res);
																						if (res.data.code ===20000) {
																							that.goodsList.forEach((item,index)=>{
																								item.forEach((item1,index1)=>{
																									if(item1.goods.id==that.goodId){
																										item1.goods.exposure+=5
																										wx.showToast({
																										  title: '超级擦亮成功',
																										  icon: 'success',
																										  duration: 1000
																										})
																									}
																								})
																							})
																						} else {
																							uni.showLoading({
																								title: '请稍等..',
																								mask: true
																							})
																							console.log('请求成功，但返回的是false')
																						}
					
																					},
																					fail(error) {
																						wx.showToast({
																						  title: '失败请联系客服',
																						  icon: 'error',
																						  duration: 1000
																						})
																						console.log('支付成功但曝光失败')
																					}
																				});
					
																},
																fail(res) {
																	// uni.showToast({
																	//     title: '已取消',
																	// 	icon: 'error',
																	//     duration: 2000
																	// });
																}
															})
														},
														fail(error) {
															// console.log(111, error)
														}
													});
												}
											},
											fail(error) {
												// console.log(111, error)
											}
										});
					
					
									}
								});
							} else {
								uni.showToast({
									title: '请稍后重试',
									icon: 'error',
									duration: 2000
								});
								this.error = true
							}
						}
					});
					
					
																		
					
				},
				async polished(type){
					console.log('擦亮商品函数传过来的id',this.goodId)
					let header = new Object()
					let body = new Object()
					header.Authority = getApp().globalData.header.Authority
					body.goodsId = this.goodId
					if(type==1){
						let data = await getApp().UniRequest(`/twohandbook/goods/authority/exposure?Authority=${header.Authority}`,'POST',body,header)
					console.log('擦亮商品res',data)
					if(data.code==20000){ 
						this.goodsList.forEach((item,index)=>{
							item.forEach((item1,index1)=>{
								if(item1.goods.id==this.goodId){
									item1.goods.exposure+=1 
									uni.showToast({
										title: '已擦亮',
										icon: 'success',
										duration: 500
									})
								}
							})
						})
						if(this.hasPolishedId.indexOf(this.goodId)==-1){
							this.hasPolishedId.push(this.goodId)
						}
						this.commonPoblishBth=false
						this.isPoblish=true
					}
					}
					else if(type==3){
						uni.showToast({
							title: '今日已擦亮',
							icon: 'error',
							duration: 200
						})
																
					}else{
						console.log('擦亮出错啦！！！')
						return
					}
					
				},
				navigatorTo1(id){
					id=id[0]
					console.log('***000000000000000',id)
					uni.navigateTo({
						url:"/page_idle/detail?goodId="+id
					})
				},
				toEditPage(id){
					id=id[0]
					uni.navigateTo({
						url:"/page_idle/editGood?goodId="+id
					})
				
				},
				navigatorToSoldOut(){
					uni.navigateTo({
						url:"/page_mine/hasSoldOut/hasSoldOut"
					})
				},
				randomString(len) {
					len = len || 32;
					var $chars =
						'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
					var maxPos = $chars.length;
					var pwd = '';
					for (let i = 0; i < len; i++) {
						pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
					}
					// console.log('随机数', pwd)
					return pwd;
				},
				
			},
		}
	
</script>

<style lang="scss">
// 	/deep/.u-btn--primary--plain.data-v-6e15e680 {
//     color: #fff !important;
//     border-color: #a0cfff !important;
//     background-color: #6ca3e0 !important;
// }
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	.outerContainer{
		display: flex;
		margin-left: -33rpx;
		align-items: center;
		.line{
			display: flex;
			align-items: center;
			flex: 0.2;
			height: 60rpx;
			border-left: 7rpx solid #ccc;
		}
		.container1{
			width: 139rpx;
			height: 152rpx;
		}
		// .container1:nth-child(2){
		// 	margin-left: 10rpx;
		// }
		.textt{
			color: rgb(150, 150, 150);
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.yixiajia{
		margin-left: 53rpx;
		color: blue;
		font-size: 26rpx;
	}
	.timeLine{
		width: 93%;
		margin: 0 auto;
		// margin-top: 15rpx;
	}
	.first_tab{
		.goodsItem{
			box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			width: 106%;
			margin: 1rpx auto;
			margin-top: 18rpx;
			height: 238rpx;
			border-radius: 24rpx;
			margin-left: -29rpx;
	    .goods_item{
			display: flex;
	        padding: 10rpx 0;
	        height: 100%;
	        border-radius: 20rpx;
			// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
	        .goods_img_wrap{
	           flex: 0.6;
	           height: 100%;
	           display: flex;
	           justify-content: center;
	           align-items: center;
				.imgRadius{
				    width: 90%;
				    height: 100%;
				    border-radius: 18rpx;
				    display: flex;
				    overflow: hidden;
				    justify-content: center;
				    align-items: center;
				}
	            image{
	                width: 100%;
	                border-radius: 10rpx;
	            } 
	        }
	        .goods_info_wrap{
	            flex: 1.2;
	            display: flex;
	            flex-direction: column;
	            justify-content: space-around;
				.rightInfo{
					display: flex;
					.goodsInfo1{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.goods_name{
						display: -webkit-box;
						width: 149rpx;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
						}
						.goods_price{
						    color: #fd4f02;
						    font-size: 38rpx;
						}
					}
					.rate{
						flex: 1.7;
						display: flex;
						justify-content: center;
						align-items: center;
						.container1{
						    width: 122rpx;
						    height: 152rpx;
					
					}
					}
				}
				
	            
				.baoGuang{
				     display: flex;
				     width: 100%;
				     margin: 0 auto;
				     // padding-left: 26.8rpx;
					.statusBut{
					        width: 74rpx;
					        margin-left: 142rpx;
					        margin-top: 11rpx;
					    
						image{
						    width: 100%;
						    margin-top: -6rpx;
						}
					}
					.classifyBtn{
					    margin-bottom: 14rpx;
					    width: 104rpx;
					    margin-right: 17rpx;
						.itemBtn:nth-child(1){
							margin-left: 6rpx;
						}
						button{
						    white-space: nowrap;
						    width: 90%;
						    font-size: 28rpx;
						    height: 65rpx;
						    border-radius: 32rpx;
						    position: relative;
						    display: flex;
						    align-items: center;
						    justify-content: center;
							
							.biaoti{
							    margin-left: -0.1rpx;
							    margin-top: -3rpx;
								font-weight: 600;
								font-size: 26rpx;
							    display: block;
							    width: 123%;
							    height: 108%;
								
							}
							
						}
					}
				}
	           
				.goods_createTime{
					font-size: 25rpx;
					white-space: nowrap;
				}
	        }
			// .statusBut{
			// 	flex: 1;
			// 	display: flex;
			// 	justify-content: left;
			// 	align-items: center;
			// 	image{
			// 		width: 69%;
			// 	}
			// }
			
			
	    }
		
		
		
		
		
		}
		.goodsItem:nth-child(1){
			margin-top: 20rpx;
		}
	
	}
	u-popup{
		padding: 10rpx;
	}
	.text{
	    font-size: 26rpx;
	    font-weight: 600;
	    width: 90%;
	    margin: 0 auto;
	    padding-top: 70rpx;
	    padding-bottom: 34rpx;
		
	}
	.buttonCaL{
		width: 90%;
		margin: 0 auto;
		.button1{
				.btnCom /deep/.u-btn--warning--plain.data-v-6e15e680 {
				    color: #ffffff!important;
				    border-color: #467981 !important;
				    background-color: #60bbf1 !important;
				}
			
			margin-bottom: 25rpx;
		}
	}
</style>
